<template>
  <el-row style="margin: 20px">
    <el-col :span="12">
      <div class="clock">
        <h1>canvas时钟</h1>
        <canvas ref="clock" id="clock" width="600" height="600"></canvas>
      </div>
    </el-col>
    <el-col :span="12">
      <h1>刮刮乐</h1>
      <div class="test" style="width: 600px; height: 600px">
        <canvas
          ref="test"
          style="border: 1px solid red"
          width="400"
          height="100"
        ></canvas>
        <div class="text">恭喜您获得100w</div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang='ts'>
import { defineComponent, nextTick, onMounted, onUnmounted, ref } from '@vue/runtime-core'

export default defineComponent({
  name: 'draw',
  setup () {
    const clock = ref()
    const test = ref()
    let timerId = null
    function draw () {
      const canvas = clock.value
      const ctx: CanvasRenderingContext2D = canvas.getContext('2d')
      ctx.save()
      ctx.clearRect(0, 0, 600, 600)
      ctx.translate(300, 300)
      ctx.save()

      ctx.beginPath() // 开始一个新的路径
      ctx.arc(0, 0, 100, 0, 2 * Math.PI)
      ctx.stroke() // 执行画线段的操作
      // ctx.closePath()  // 闭合图形 将路径的终点与起点相连
      ctx.beginPath()
      ctx.arc(0, 0, 5, 0, 2 * Math.PI)
      ctx.stroke()

      ctx.rotate(-0.5 * Math.PI)

      const { hAngle, mAngle, sAngle } = calcTimeAngle()
      // 时针
      ctx.save()
      ctx.beginPath()
      ctx.rotate(hAngle)
      ctx.lineWidth = 10
      ctx.moveTo(-10, 0)
      ctx.lineTo(40, 0)
      ctx.stroke()
      ctx.restore()
      // 分针
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.strokeStyle = 'blue'
      ctx.rotate(mAngle)
      ctx.moveTo(-10, 0)
      ctx.lineTo(50, 0)
      ctx.stroke()
      ctx.restore()

      // 秒针
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = 2
      ctx.strokeStyle = 'red'
      ctx.rotate(sAngle)
      ctx.moveTo(-10, 0)
      ctx.lineTo(70, 0)
      ctx.stroke()
      ctx.restore()

      // 小刻度
      ctx.lineWidth = 1
      // ctx.restore() // 除掉strokeStyle的影响
      ctx.save()
      ctx.rotate((-2 * Math.PI) / 60)
      for (let i = 0; i < 60; i++) {
        ctx.rotate((2 * Math.PI) / 60)
        ctx.beginPath()
        ctx.moveTo(90, 0)
        ctx.lineTo(100, 0)
        // ctx.strokeStyle = 'red'
        ctx.stroke()
      }
      ctx.restore()

      ctx.rotate((-2 * Math.PI) / 6)
      ctx.restore()
      ctx.lineWidth = 3
      ctx.fillStyle = 'purple' // 设置填充颜色为紫色
      ctx.font = '12px "微软雅黑"' // 设置字体
      ctx.textBaseline = 'bottom'
      ctx.textAlign = 'center'
      for (let i = 0; i < 12; i++) {
        ctx.fillText(i === 0 ? '12' : i + '', 0, -60)
        ctx.rotate((2 * Math.PI) / 12)
        ctx.beginPath()
        ctx.moveTo(80, 0)
        ctx.lineTo(100, 0)
        // ctx.strokeStyle = 'red'
        ctx.stroke()
      }

      ctx.restore()
    }
    function calcTimeAngle () {
      const circleRadian = 2 * Math.PI
      const current = new Date()
      const h = current.getHours() % 12
      const m = current.getMinutes()
      const s = current.getSeconds()
      const hAngle = (circleRadian / 12) * h + ((circleRadian / 12) * m) / 60
      const mAngle = (circleRadian / 60) * m + ((circleRadian / 60) * s) / 60
      const sAngle = (circleRadian / 60) * s
      return {
        hAngle,
        mAngle,
        sAngle,
      }
    }
    function drawTest () {
      const el = test.value
      const ctx: CanvasRenderingContext2D = el.getContext('2d')
      // 填充的颜色
      ctx.fillStyle = 'darkgray'
      // 填充矩形 fillRect(起始X,起始Y,终点X,终点Y)
      ctx.fillRect(0, 0, 400, 100)
      ctx.fillStyle = 'red'
      // 绘制填充文字
      ctx.fillText('刮刮卡', 180, 50)

      let isDraw = false
      el.onmousedown = function () {
        console.log('mousedown')
        isDraw = true
      }
      el.onmouseup = function () {
        console.log('onmouseup')

        isDraw = false
      }
      el.onmousemove = function (e) {
        if (!isDraw) {
          return false
        }

        const x = e.offsetX
        const y = e.offsetY

        ctx.globalCompositeOperation = 'destination-out'
        // // // 画圆
        console.log(x, y)
        ctx.arc(x, y, 10, 0, 2 * Math.PI)
        // 填充圆形
        ctx.fill()
      }
    }

    onMounted(() => {
      timerId = setInterval(draw, 1000)
      nextTick(() => {
        drawTest()
        // draw()
      })
    })
    onUnmounted(() => {
      clearInterval(timerId)
    })
    return {
      clock,
      test,
    }
  },
})
</script>

<style  lang="less">
.test {
  position: relative;
  .text {
    position: absolute;
    left: 0;
    top:0;
    line-height: 100px;
    width:400px;
    height:100px;
    text-align: center;
    z-index: -1;
  }
}
</style>
